<template>
	<view class="page_box">
		<!-- <view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if='0' >
				<block slot="backText">返回</block>
				<block slot="content">库存管理测试</block>
			</yy-custom>
		</view> -->

		<view class="content_box">
			<view class="head bg-img  padding">
				<view class="invFlow   flex align-center justify-around "
					@click="jump('/pages/invManagement/invFlow', 2)">
					<image src="../../static/liushui.png" mode="aspectFill"></image>
					<text>库存流水</text>
				</view>
				<view class="flex flex-direction">
					<text class="f24">总库存(箱)</text>

					<text class="f60 text-bold margin-top-xs" style="line-height: 1;">{{ total }}</text>
				</view>
				<view class="flex  justify-around  " style="margin-top: 42rpx;">
					
					
					<view v-if="init != 2" @click="jump('/pages/invManagement/lvlActivation', 1)" 
						class="text-white flex align-center justify-center flex-direction head-list ">
						<view class="flex align-center justify-center red">
							<image src="../../static/buhuo.png" mode="aspectFill" style="width: 46rpx; height: 46rpx;">
							</image>
							<text class="red-inside"></text>
						</view>
						<text class="f24 margin-top-sm"
							>等级激活</text>
						<!-- <text v-if="init != 2" class="f24 margin-top-sm"
							@click="jump('/pages/invManagement/lvlActivation', 1)">等级激活</text>
						<text v-else class="f24 margin-top-sm"
							@click="jump('/pages/invManagement/applyForReplenishment', 2)">申请补货</text> -->
					</view>
					
					<view v-else @click="jump('/pages/invManagement/applyForReplenishment', 2)"
						class="text-white flex align-center justify-center flex-direction head-list ">
						<view class="flex align-center justify-center red">
							<image src="../../static/buhuo.png" mode="aspectFill" style="width: 46rpx; height: 46rpx;">
							</image>
							<text class="red-inside"></text>
						</view>
						<text  class="f24 margin-top-sm"
							>申请补货</text>
					</view>
					
					
					<view class="text-white flex align-center justify-center flex-direction head-list"
						@click="jump('/pages/invManagement/replenishmentRvw', 2)">
						<image src="../../static/shenhe.png" mode="aspectFill" style="width: 46rpx; height: 46rpx;">
						</image>
						<text class="f24 margin-top-sm">补货审核</text>
					</view>
					<view class="text-white flex align-center justify-center flex-direction head-list"
						@click="jump('/pages/invManagement/applyForDelivery', 2)">
						<image src="../../static/tihuo.png" mode="aspectFill" style="width: 46rpx; height: 46rpx;">
						</image>
						<text class="f24 margin-top-sm">申请提货</text>
					</view>
				</view>
			</view>
			<view class="prompt flex justify-between align-center padding-lr-sm" v-if="init == 0">
				<view class="flex align-center f26">
					<text class="cuIcon-noticefill margin-right-xs f26"></text>
					等级激活未申请！请先进行等级激活。
				</view>
				<!-- <text class="cuIcon-close"></text> -->
			</view>
			<view class="prompt flex justify-between align-center padding-lr-sm" v-if="init == 1">
				<view class="flex align-center f26">
					<text class="cuIcon-noticefill margin-right-xs f26"></text>
					等级激活申请提交成功！等待上级审核
				</view>
				<!-- <text class="cuIcon-close"></text> -->
			</view>

			<view class="commodity margin-top-lg padding-lr flex justify-between flex-wrap">
				<view class="commodity-l flex flex-direction " v-for="(item, index) in repertory" :key="index">
					<view class="flex align-center justify-center" style="width: 340rpx; height: 340rpx;">
						<image :src="item.img" mode="aspectFill" class=" radius" style="width: 280rpx; height: 280rpx;">
						</image>
					</view>

					<text class="f30 text-light margin-top-xs flex justify-center">{{item.name}}</text>
					<!-- <text class="f26 text-gray margin-top-xs flex justify-center">净含量：{{item.size}}</text> -->
					<view class="w100 flex justify-center margin-top-sm"><button
							class="cu-btn btn f28 text-white ">共{{item.repertoryNum}}箱</button></view>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				total: '',
				repertory: [],
				user: {},
				init: '',
			};
		},
		onShow() {
			this.invInq();
		},
		onLoad(e) {
			this.order()
			this.user = uni.getStorageSync('data');
		},
		methods: {
			jump(url, index) {
				console.log('', url === '/pages/invManagement/lvlActivation', url)
				if (this.init != 2 && url == '/pages/invManagement/lvlActivation') {
					uni.navigateTo({
						url,
					});
				} else if (this.init != 2) {
					return this.$refs.uToast.show({
						title: '请您先激活等级!',
						type: 'none'
					});
				}
				if (this.init == 2) {
					uni.navigateTo({
						url
					});
				}
			},
			// 库存查询
			async invInq() {
				// uni.getStorageSync('data').id
				let res = await this.$u.get('/repertory/' + uni.getStorageSync('data').id, {}, {});
				this.total = res.data.totle;
				this.repertory = res.data.repertory;
			},

			async order() {
				// uni.getStorageSync('data').id
				// 0 未申请
				// 1 已申请
				// 2 是以通过
				let res = await this.$u.get('/order/isactive/', {
					id: uni.getStorageSync('data').id,
				}, {});
				if (res.code == 0) {
					this.init = res.data
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #ffffff;
		margin-top: -5rpx;

		.content_box {
			.head {
				// margin-top: -5rpx;

				width: 100vw;
				height: 384rpx;
				// background-image: url(https://i.loli.net/2021/04/28/N2POKjco8Cy5TGD.png);
				background-color: #92b9b7;

				.red {
					position: relative;

					.red-inside {
						position: absolute;
						top: -19rpx;
						right: -19rpx;
						width: 15rpx;
						height: 15rpx;
						background: #ff0000;
						border-radius: 8rpx;
					}
				}

				.head-list {
					width: 180rpx;
					height: 180rpx;
					background: #769d9b;
					border-radius: 20rpx;
				}

				.invFlow {
					position: absolute;
					right: 0;
					top: 50rpx;
					width: 208rpx;
					height: 60rpx;
					background: #5b8180;
					border-radius: 29rpx 0rpx 0rpx 29rpx;

					image {
						width: 29rpx;
						height: 29rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
					}
				}
			}

			.prompt {
				width: 750rpx;
				height: 60rpx;
				background: #fff7eb;

				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fbb03b;
			}

			.commodity {
				.commodity-l {
					width: 320rpx;

					.btn {
						width: 240rpx;
						height: 56rpx;
						background: #fbb03b;
						border-radius: 28rpx;
					}
				}
			}
		}
	}
</style>
